<template>
  <view class="mine-page">
    <!-- 自定义状态栏 -->
    <view class="custom-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 个人信息区域 -->
    <view class="profile-section">
      <view class="profile-bg">
        <view class="profile-content">
          <view class="avatar-container">
            <image
                class="user-avatar"
                :src="userInfo.head || defaultAvatar"
                mode="aspectFill"
            ></image>
          </view>
          <view class="user-info">
            <view class="user-name">{{ userInfo.name || '未设置昵称' }}</view>
            <view class="user-desc">{{ userInfo.remark || '这个人很懒，什么都没留下' }}</view>
            <!--            <view class="user-stats">-->
            <!--              <view class="stat-item">-->
            <!--                <text class="stat-number">{{ userInfo.orderCount || 0 }}</text>-->
            <!--                <text class="stat-label">订单</text>-->
            <!--              </view>-->
            <!--              <view class="stat-divider"></view>-->
            <!--              <view class="stat-item">-->
            <!--                <text class="stat-number">{{ userInfo.favoriteCount || 0 }}</text>-->
            <!--                <text class="stat-label">收藏</text>-->
            <!--              </view>-->
            <!--              <view class="stat-divider"></view>-->
            <!--              <view class="stat-item">-->
            <!--                <text class="stat-number">{{ userInfo.followCount || 0 }}</text>-->
            <!--                <text class="stat-label">关注</text>-->
            <!--              </view>-->
            <!--            </view>-->
          </view>
        </view>
      </view>
    </view>

    <!-- 菜单区域 -->
    <view class="menu-section">
      <view class="menu-group">
        <view class="menu-item" @click="goToPage('/pagesMall/mallCenter/myInfo')">
          <view class="menu-icon">
            <u-icon name="edit-pen" size="40" color="#4a90e2"></u-icon>
          </view>
          <view class="menu-content">
            <text class="menu-title">个人信息</text>
            <text class="menu-desc">编辑个人信息</text>
          </view>
          <view class="menu-arrow">
            <u-icon name="arrow-right" size="24" color="#ccc"></u-icon>
          </view>
        </view>
        <view class="menu-item" @click="goToPage('/pagesMall/mallCenter/messageList')">
          <view class="menu-icon">
            <u-icon name="chat" size="40" color="#4a90e2"></u-icon>
          </view>
          <view class="menu-content">
            <text class="menu-title">我的消息</text>
            <text class="menu-desc">查看系统消息和通知</text>
          </view>
          <view class="menu-arrow">
            <u-icon name="arrow-right" size="24" color="#ccc"></u-icon>
          </view>
        </view>

        <view class="menu-item" @click="goToPage('/pagesMall/myShop/mine')">
          <view class="menu-icon">
            <u-icon name="home" size="40" color="#ff6b35"></u-icon>
          </view>
          <view class="menu-content">
            <text class="menu-title">我的店铺</text>
            <text class="menu-desc">管理我的商品和店铺</text>
          </view>
          <view class="menu-arrow">
            <u-icon name="arrow-right" size="24" color="#ccc"></u-icon>
          </view>
        </view>

        <view class="menu-item" @click="goToPage('/pagesMall/distribution/distribution')">
          <view class="menu-icon">
            <u-icon name="share" size="40" color="#52c41a"></u-icon>
          </view>
          <view class="menu-content">
            <text class="menu-title">分销中心</text>
            <text class="menu-desc">推广商品赚取佣金</text>
          </view>
          <view class="menu-arrow">
            <u-icon name="arrow-right" size="24" color="#ccc"></u-icon>
          </view>
        </view>
      </view>

      <view class="menu-group">
        <view class="menu-item" @click="goToPage('/pagesMall/mallCenter/address')">
          <view class="menu-icon">
            <u-icon name="map" size="40" color="#722ed1"></u-icon>
          </view>
          <view class="menu-content">
            <text class="menu-title">地址管理</text>
            <text class="menu-desc">管理收货地址</text>
          </view>
          <view class="menu-arrow">
            <u-icon name="arrow-right" size="24" color="#ccc"></u-icon>
          </view>
        </view>

        <view class="menu-item" @click="contactService">
          <view class="menu-icon">
            <u-icon name="kefu-ermai" size="40" color="#fa8c16"></u-icon>
          </view>
          <view class="menu-content">
            <text class="menu-title">官方客服</text>
            <text class="menu-desc">在线客服为您服务</text>
          </view>
          <view class="menu-arrow">
            <u-icon name="arrow-right" size="24" color="#ccc"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {mapGetters} from 'vuex'
import authMixin from '@/common/libs/authMixin.js'

export default {
  mixins: [authMixin],
  data() {
    return {
      statusBarHeight: 0,
      defaultAvatar: 'https://file.casugn.com/storecompcard/temp/456_1757666005254.png',
      userInfo: {
        avatar: '',
        nickname: '用户昵称',
        desc: '这个人很懒，什么都没留下',
        orderCount: 12,
        favoriteCount: 8,
        followCount: 25
      }
    }
  },
  onShow() {
    this.getSystemInfo()
    // 确保用户已登录后再获取用户信息
    // const isAuth = await this.ensureAuth(false)
    // if (isAuth) {
    //   console.log('userInfo', this.userInfo)
    this.getUserInfo()
    // }
  },
  computed: {
    ...mapGetters(['openId'])

    // ...mapGetters(['userInfo']),
  },
  methods: {
    // 获取系统信息
    getSystemInfo() {
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight || 0
    },
    // 获取用户信息
    async getUserInfo() {
      if (!this.openId) {
        uni.showToast({
          title: '用户信息获取失败',
          icon: 'none'
        })
        return
      }

      uni.showLoading({
        title: '加载中...'
      })

      try {
        const res = await this.$api.queryCurrentCardByOpenId({
          openId: this.openId
        })

        if (res.success && res.result) {
          this.userInfo = res.result

          console.log('获取用户信息成功:', this.userInfo)
        } else {
          uni.showToast({
            title: res.message || '获取用户信息失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取用户信息失败:', error)
        uni.showToast({
          title: '获取用户信息失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    // 更换头像
    // 页面跳转
    goToPage(url) {
      uni.navigateTo({
        url: url,
        fail: () => {
          uni.showToast({
            title: '页面开发中',
            icon: 'none'
          })
        }
      })
    },
    // 联系客服
    contactService() {
      uni.showModal({
        title: '联系客服',
        content: '客服电话：400-123-4567\n工作时间：9:00-18:00',
        showCancel: false,
        confirmText: '知道了'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.mine-page {
  min-height: 100vh;
  background: #f5f6fa;
}

/* 自定义状态栏 */
.custom-status-bar {
  background: linear-gradient(135deg, #4a90e2 0%, #5ba0f2 100%);
  width: 100%;
}

/* 个人信息区域 */
.profile-section {
  background: linear-gradient(135deg, #4a90e2 0%, #5ba0f2 100%);
  padding: 0 0 40rpx 0;

  .profile-bg {
    padding: 40rpx 32rpx 0;

    .profile-content {
      display: flex;
      align-items: center;

      .avatar-container {
        position: relative;
        margin-right: 32rpx;

        .user-avatar {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          border: 4rpx solid rgba(255, 255, 255, 0.3);
        }

        .avatar-edit {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 40rpx;
          height: 40rpx;
          background: rgba(0, 0, 0, 0.6);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 2rpx solid #fff;
        }
      }

      .user-info {
        flex: 1;

        .user-name {
          font-size: 36rpx;
          font-weight: 600;
          color: #fff;
          margin-bottom: 12rpx;
        }

        .user-desc {
          max-width: 450rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 26rpx;
          color: rgba(255, 255, 255, 0.8);
          //margin-bottom: 24rpx;
          line-height: 1.4;
        }

        .user-stats {
          display: flex;
          align-items: center;

          .stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;

            .stat-number {
              font-size: 32rpx;
              font-weight: 700;
              color: #fff;
              margin-bottom: 4rpx;
            }

            .stat-label {
              font-size: 22rpx;
              color: rgba(255, 255, 255, 0.7);
            }
          }

          .stat-divider {
            width: 1rpx;
            height: 40rpx;
            background: rgba(255, 255, 255, 0.3);
            margin: 0 32rpx;
          }
        }
      }
    }
  }
}

/* 菜单区域 */
.menu-section {
  padding: 32rpx;

  .menu-group {
    background: #fff;
    border-radius: 20rpx;
    margin-bottom: 24rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

    .menu-item {
      display: flex;
      align-items: center;
      padding: 32rpx;
      border-bottom: 1rpx solid #f0f0f0;
      transition: all 0.3s ease;

      &:last-child {
        border-bottom: none;
      }

      &:active {
        background: #f8f9fa;
      }

      .menu-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 16rpx;
        background: rgba(74, 144, 226, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 24rpx;
      }

      .menu-content {
        flex: 1;

        .menu-title {
          display: block;
          font-size: 32rpx;
          font-weight: 500;
          color: #2d3436;
          margin-bottom: 8rpx;
        }

        .menu-desc {
          display: block;
          font-size: 24rpx;
          color: #8a8a8a;
        }
      }

      .menu-arrow {
        margin-left: 16rpx;
      }
    }
  }
}
</style>
